 .label-nav {
     display: flex;
     position: relative;

     .drop-nav-list {
         background: #fff;
         width: 100%;
         box-sizing: border-box;
         padding: 0px 15px 20px 15px;
         position: absolute;
         top: 0;
         z-index: 1001;

         .drop-title {
             height: 45px;
             line-height: 45px;
             font-size: 13px;
             font-weight: 600;

             .more-top {
                 right: 0;
                 top: 0;
                 width: 33px;
                 height: 45px;
                 position: absolute;
                 z-index: 1500;
                 background: #fff;
                 right: 0;
             }

             .more-top::after {
                 border: solid 2px #000;
                 border-bottom-width: 0;
                 border-left-width: 0;
                 content: ' ';
                 top: 60%;
                 right: 10px;
                 position: absolute;
                 width: 10px;
                 height: 10px;
                 -webkit-transform: translateY(-50%) rotate(45deg);
                 transform: translateY(-50%) rotate(-45deg);
             }
         }

         .nav-list-content {
             overflow: hidden;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;

             .nav-item {
                 box-sizing: border-box;
                 width: 31%;
                 margin: 1.6%;
                 height: 30px;
                 line-height: 30px;
                 border: 1rpx solid #e9e9e9;
                 border-radius: 5px;
                 font-size: 14px;
                 text-align: center;

                 &:nth-of-type(3n) {
                     margin-right: 0;
                 }

                 &:nth-of-type(3n + 1) {
                     margin-left: 0;
                 }
             }

             .active {
                 color: #eb0e0e;
                 border: 1rpx solid #eb0e0e;

                 text {
                     color: #eb0e0e;
                 }
             }
         }
     }

     .more-bot {
         right: 0;
         top: 0;
         width: 33px;
         height: 45px;
         position: absolute;
         z-index: 1000;
         background: #101013;
     }

     .more-bot::after {
         border: solid 2px #fff;
         border-bottom-width: 0;
         border-left-width: 0;
         content: ' ';
         top: 40%;
         right: 10px;
         position: absolute;
         width: 10px;
         height: 10px;
         -webkit-transform: translateY(-50%) rotate(45deg);
         transform: translateY(-50%) rotate(135deg);
     }

     .label-scoll {
         background: #101013;
         height: 45px;
         overflow: hidden;
         white-space: nowrap;
         color: #fff;

         .label-item {
             display: inline-block;
             box-sizing: border-box;
             padding: 0 8px;
             min-width: 60px;
             height: 45px;
             line-height: 45px;
             font-size: 15px;
             text-align: center;
             vertical-align: top;

             .inner {
                 //  min-width: 40px;

                 .num {
                     vertical-align: middle;
                     display: inline-block;
                     margin-left: 3px;
                     margin-bottom: 3px;
                     height: 15px;
                     line-height: 15px;
                     box-sizing: border-box;
                     min-width: 15px;
                     padding: 0 2px;
                     font-size: 12px;
                     border: 1px solid #ffffff;
                     border-radius: 9px;

                 }

             }

             &:last-child {
                 padding-right: 40px;
             }
         }

         .active {
             color: #FF8787;

             .inner {
                 position: relative;
                 display: inline-block;

                 &:after {
                     content: '';
                     position: absolute;
                     background: #FF8787;
                     display: block;
                     left: 50%;
                     top: 35px;
                     width: 22px;
                     height: 2px;
                     border-radius: 2px;
                     transform: translateX(-50%);
                 }

                 .num {
                     color: #FF8787;
                     border: 1px solid #FF8787;
                 }
             }
         }
     }

     .pop-mask {
         position: fixed;
         z-index: -1;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.3);
     }
 }

 .nav-container {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 2000;
     background: #101013;
 }
